<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }
    </style>
  </head>

  <body>
    <div></div>
    <script>
      // 1.  当我们手指触摸屏幕touchstart，记录当前触摸时间
      // 2.  当我们手指离开屏幕touchend， 用离开的时间减去触摸的时间
      // 3.  如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击

      var div = document.querySelector("div");

      tap(div, function () {
        console.log("被点击了！");
      });

      function tap(element, callback) {
        var startTime = null; // 记录点击的初始时间
        var isMove = false; // 判断用户有没有滑动的行为

        // 禁用掉系统的默认的点击行为
        element.addEventListener("click", function (e) {
          e.preventDefault();
        });

        // touchstart事件 记录时间
        element.addEventListener("touchstart", function () {
          startTime = Date.now();
        });

        // 如果touchmove事件被触发  用户就是在触摸移动 ，我们就通过变量 isMove记录下来
        element.addEventListener("touchmove", function () {
          isMove = true;
        });

        // touchend 手指离开
        element.addEventListener("touchend", function (e) {
          // 计算时间间隔
          var interval = Date.now() - startTime;

          // 根据事件间隔是否小于150ms  以及 用户没有 移动行为 来决定 调用点击回调函数
          if (interval < 150 && !isMove) {
            callback && callback(e);
          }

          startTime = null;
            isMove = false;
        });
      }

      // div.onclick = function() {
      // //     console.log(1)
      // // }
      // tap(div, function() {
      //     console.log('模拟点击！');
      // })

      // // 自己封装一个tap函数  实现自定义的点击效果
      // // obj绑定点击的元素
      // // callback  点击后执行的事件处理函数
      // function tap(obj, callback) {
      //     var startTime = null;
      //     var isMove = false;
      //     obj.addEventListener('touchstart', function() {
      //         startTime = new Date();
      //     })

      //     obj.addEventListener('touchmove', function() {
      //         isMove = true;
      //     })

      //     obj.addEventListener('touchend', function() {
      //         var endTime = new Date();
      //         if (endTime - startTime < 150 && !isMove) {
      //             callback & callback();
      //         }
      //     })

      //     startTime = null;
      //     isMove = false;
      // }
    </script>
  </body>
</html>
